<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>PROJECT</title>
        <h:outputStylesheet library="css" name="myCss.css"  />
    </h:head>
    <h:body>
        <h:form id="headerForm">

            <p:growl id="growl" showDetail="true" />
            <p:panelGrid id="headerGrid" columns="2" styleClass="organisationGrid"> 
                <p:column rendered="#{!headerBean.logged}" >
                    <p:commandButton value="Login" onclick="loginPanel.show()"/> 
                    <p:commandButton value="Register" onclick="registerPanel.show()" />
                </p:column>
                <p:spacer rendered="#{!headerBean.logged}"/>
                <p:column  rendered="#{headerBean.logged}">
                    <h:outputText value="#{headerBean.loggedUser.firstName} #{headerBean.loggedUser.lastName}"/>
                </p:column>
                <p:column  rendered="#{headerBean.logged}">
                    <p:commandButton value="My Account" icon="ui-icon-person"/>
                    <p:spacer width="30" height="1"/> 
                    <p:commandButton value="Logout" action="#{headerBean.logout}" icon="ui-icon-power"
                                     update="headerForm,:contentGrid"/> 
                </p:column>
                <p:column colspan="2">
                    <img src="resources/images/header.png" />  
                </p:column>
                <p:spacer />
            </p:panelGrid>
            <p:menubar id="menuBar" rendered="#{headerBean.logged}">
                <p:menuitem value="Index" action="#{navigationBean.changePage('/default.xhtml')}" icon="ui-icon-home"
                            update=":contentGrid" style="background-color: dodgerblue" />
                <p:menuitem value="Search Article" action="#{navigationBean.changePage('/searchArticle.xhtml')}"
                            update=":contentGrid" style="background-color: dodgerblue"/>
                <p:menuitem value="Submit Article" action="#{navigationBean.changePage('/submitArticle.xhtml')}"
                            update=":contentGrid" style="background-color: dodgerblue"/>
                <p:menuitem value="My Article" action="#{navigationBean.changePage('/myArticle.xhtml')}"
                            update=":contentGrid" style="background-color: dodgerblue"/>
                <p:menuitem value="My Auctions" action="#{navigationBean.changePage('/myAuction.xhtml')}"
                            update=":contentGrid" style="background-color: dodgerblue"/>
            </p:menubar>
        </h:form>
        <h:form id="loginForm">
            <p:dialog draggable="false"  id="loginDialog" header="Login" widgetVar="loginPanel" modal="true" height="200">  

                <p:panelGrid columns="3" id="loginGrid" styleClass="organisationGrid">
                    <h:outputText value="Mail" styleClass="outputTextLabel"/>
                    <h:inputText value="#{headerBean.login}" required="true" id="loginInput" label="Mail" validatorMessage="Email address is not valid">
                        <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]"/>
                    </h:inputText>
                    <p:message for="loginInput" id="msgLogin"/>
                    <h:outputText value="Password" styleClass="outputTextLabel"/>
                    <h:inputSecret value="#{headerBean.password}" id="password" required="true" label="password"/>
                    <p:message for="password" id="msgPassword"/>
                    <p:commandButton value="Login" action="#{headerBean.login()}" update=":headerForm,msgPassword,msgLogin,:headerForm:growl" 
                                     oncomplete="loginPanel.hide()" />
                    <p:commandButton value="cancel" onclick="loginPanel.close()"/> 
                </p:panelGrid>

            </p:dialog> 
        </h:form>
        <h:form id="registrationForm">
            <p:dialog draggable="false"  id="registerDialog" header="Registration" widgetVar="registerPanel" modal="true">  

                <p:wizard >
                    <p:tab id="loginInfo" title="login">
                        <p:panelGrid columns="3" styleClass="organisationGrid">
                            <h:outputText value="Mail" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.mail}" id="regLogin" required="true" label="Mail">
                                <f:validator  validatorId="emailValidator"/>
                            </h:inputText>
                            <p:message for="regLogin" id="msgRegLogin"/>
                            <h:outputText value="Password 1" styleClass="outputTextLabel"/>
                            <p:password id="pwd1" value="#{registrationBean.password}" match="pwd2" label="Password 1" required="true"/>  
                            <p:message for="pwd1" id="msgRegPass"/>
                            <h:outputLabel for="pwd2" value="Password 2" styleClass="outputTextLabel"/>
                            <p:password id="pwd2" value="#{registrationBean.password}" label="Password 2" required="true" />
                            <p:message for="pwd2" id="msgRegPassConfirm"/>

                        </p:panelGrid>
                    </p:tab>

                    <p:tab id="account" title="account">
                        <p:panelGrid columns="3"  styleClass="organisationGrid">
                            <h:outputText value="Firstname" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.firstName}" label="Firstname"  id="regFirst" required="true"/>
                            <p:message for="regFirst" id="msgRegFirst"/>
                            <h:outputText value="Lastname" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.firstName}" label="Lastname" id="regLast" required="true"/>
                            <p:message for="regLast" id="msgRegLast"/>
                        </p:panelGrid>
                    </p:tab>

                    <p:tab id="billing" title="billing">
                        <p:panelGrid columns="3"  styleClass="organisationGrid">
                            <h:outputText value="Number" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.number}" label="Number"  id="regNumber"/>
                            <p:message for="regNumber" id="msgRegNumber"/>
                            <h:outputText value="Street" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.street}" label="Street"  id="regStreet"/>
                            <p:message for="regStreet" id="msgRegStreet"/>
                            <h:outputText value="Zip code" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.zipCode}" label="Zip code"  id="regZipCode"/>
                            <p:message for="regZipCode" id="msgRegZipCode"/>
                            <h:outputText value="City" styleClass="outputTextLabel"/>
                            <h:inputText value="#{registrationBean.city}" label="City"  id="regCity"/>
                            <p:message for="regCity" id="msgRegCity"/>
                            <p:commandButton value="Finish" label="Submit" oncomplete="registerPanel.hide()" update=":headerForm:growl"
                                             action="#{registrationBean.createAccount}"/>
                        </p:panelGrid>
                    </p:tab>
                </p:wizard>
            </p:dialog>
        </h:form>

        <h:panelGrid id="contentGrid" columns="1">
            <ui:include src="#{navigationBean.page}" />
        </h:panelGrid> 
    </h:body>
</html>